<template>
    <div class="app">
        <div>
            <div class="map">
                <MAP :location="zuoBiao"/>
            </div>
            <div class="content-bottom">
                <div class="left-bottom-header">
                    <div class="left-bottom-imgs"><img src="../../assets/img/xuexiao.png" alt=""></div>
                        <p>合计10家心灵驿站</p>
                </div>
                <div class="left-bottom-title" v-for="(item,index) in title" :key="index">
                    <p>{{item.titel}}</p>
                    <span>{{item.tiem}}</span>
                </div>
            </div>         
        </div>
        <div class="right">
            <Right></Right>
            <!-- <div class="header">
                <div class="imgs"><img src="../../assets/img/house.png" alt=""></div>
                <p class="title">合计10家康养机构</p>
            </div> -->
            <!-- <div class="right-content" v-for="(item, value) in list" :key="value">
                <p class="right-title">{{item}}</p>
                <p class="right-text">台州市临海市大洋街道大洋西路147号</p>
            </div> -->
        </div>
    </div>
</template>
<script>
import MAP from '../../components/AMap.vue'
import Right from '../../components/right/index.vue'
export default {
    components:{
        MAP,
        Right
    },
    data () {
        return {
            content,
            list: ['大洋社区养老院', '临海市夕阳红居家养老服务中心', '老年食堂', '老年活动中心', '老年棋牌室'],
            zuoBiao:[121.161744, 28.862611],
            title:[
                { titel:'临浦某某心灵驿站', tiem:'台州市临海市大洋街道大洋西路147号'},
                { titel:'临浦某某心灵驿站', tiem:'台州市临海市大洋街道大洋西路147号'},
                { titel:'临浦某某心灵驿站', tiem:'台州市临海市大洋街道大洋西路147号'},
            ],
        }
    }
}
const content = [
    { title:'临海大洋第一中学', text:'拱墅区塘河新村2区12幢2单元301室' },
    { title:'临海大洋第二高级中学', text:'拱墅区塘河新村2区12幢2单元301室' },
    { title:'市直机关幼儿园', text:'拱墅区塘河新村2区12幢2单元301室' },
    { title:'临海大洋回族小学', text:'拱墅区塘河新村2区12幢2单元301室' },
    { title:'Candy Kids国际双语幼儿园', text:'拱墅区塘河新村2区12幢2单元301室' },
    { title:'临海大洋实验小学', text:'拱墅区塘河新村2区12幢2单元301室' },
    { title:'临海大洋实验小学', text:'拱墅区塘河新村2区12幢2单元301室' },
    { title:'临海阳光成人教育培训', text:'拱墅区塘河新村2区12幢2单元301室' },
]
</script>
<style lang="less" scoped>
.app{
    display: flex;
}
.map{
    width: 1339px;
    height: 479px;
    margin-right: 31px;
    background-color: LightGray;
    border-radius: 2px;
    border: 1px solid #EBEBEB;
}
.content-bottom{
    margin-top: 24px;
    width: 1340px;
    height: 347px;
    background: #FFFFFF;
    border-radius: 2px;
            .left-bottom-header{
            height:45px;
            font-size: 20px;
            padding-top: 26px;
            margin-left: 24px;
            // margin-bottom: 16px;
            // color: #333333;
            font-weight: bold;
            display: flex;
            .left-bottom-imgs{
                width: 30px;
                height: 30px;
                margin-right: 10px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            p{
                font-size: 20px;
            }       
        }
        .left-bottom-title{
            margin-left: 24px;
            width: 100%;
            height: 50px;
            margin-top: 30px;
            margin-bottom: 30px;
            p{
                font-size: 16px;
                font-weight: bold;
                color: #444;
                margin: 0;padding: 0;
            }
            span{
                font-size: 14px;
                font-weight: 400;
                color: #999999;
            }
        }
}
.right{
    width: 200px;
    height: 850px;
    background-color: #fff;
}
</style>